<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .time-item {
      width: 450px;
      height: 45px;
      margin: 0 auto;
    }

    .time-item strong {
      background: orange;
      color: #fff;
      line-height: 49px;
      font-size: 36px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item>span {
      float: left;
      line-height: 49px;
      color: orange;
      font-size: 32px;
      margin: 0 10px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .title {
      width: 260px;
      height: 50px;
      margin: 200px auto 50px auto;
    }
  </style>

</head>

<body>
  <h1 class="title">距离光棍节，还有</h1>

  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>
  <script>
    // 获取元素
    const day = document.querySelector('#day');
    const hour = document.querySelector('#hour');
    const minute = document.querySelector('#minute');
    const second = document.querySelector('#second');

    // 目标时间戳
    const target = +new Date('2022-11-11');

    // 定时器
    let timer = setInterval(countDown, 1000);

    // 倒计时
    countDown();
    function countDown() {
      // 时间戳差
      let diff = (target - +new Date()) / 1000;
      // 距离天数
      let d = parseInt(diff / 60 / 60 / 24);
      // 距离小时
      let h = parseInt(diff / 60 / 60 % 24);
      // 距离分
      let m = parseInt(diff / 60 % 60);
      // 距离秒
      let s = parseInt(diff % 60);
      // 填充数据
      day.innerHTML = d;
      hour.innerHTML = h;
      minute.innerHTML = m;
      second.innerHTML = s;
      // 到达目标时间清除定时器
      if (diff <= 0)
        clearInterval(timer);
    }
  </script>
</body>

</html>